<template>
	<view v-if="list.length>0" :style="viewColor">
	     <view class="page_hd">
	         <view class="rtbus-searchbar-frame">
	             <view class="rtbus-searchbar-button">
					 <text class='iconfont icon-ic_search color-999'></text>
	                 <input @input="sugKeyWord" class="rtbus-search-bar__input" :focus="inputFocus" placeholder="出发城市/景点"
	                        placeholderClass="input-placeholder" type="text" :value="inputVal"></input>
	                 <view @click="clearInput" class="rtbus-icon-clear" v-if="inputVal">
	                     <text class="iconfont icon-ic_close1 color-999"></text>
	                 </view>
	             </view>
	         </view>
	     </view>
		 <view class="page-content">
		     <!-- 历史记录 -->
		    <scroll-view :scroll-y="true" >
		    	<view class="kind_list histroy-list page_bd_spacing" v-if="!showSugResult&&type==0&&historyList.length&&!inputVal">
		    	     <!-- <scroll-view scroll-y="true" class="kind_list">
		    	         <view class="histroy-content" v-for="(item,index) in historyList" :key="index">
		    	             <view @click="handleLineSelect" class="histroy-item kind-list__item-hd" :data-index="index">
		    	                 <view class="histroy-item-icon">
		    	                     <image class="" src="/static/images/bus/search_ic_way.png"></image>
		    	                 </view>
		    	                 <view class="kind-list__item">
		    	                     <view class="rtbus-busroute-label">{{item.name}}</view>
		    	                 </view>
		    	             </view>
		    	         </view>
		    	    
		    	     </scroll-view> -->
		    		<view  class="search-empty"  style="z-index: 1000;" v-if="!historyList.length">
		    			<u-empty text="暂无数据" mode="search"></u-empty>
		    		</view>
		    	 </view>
		    	 <view  v-if="!inputVal">
		    	 	<phone-directory :phones="list" @paramClick="selectCityH5"></phone-directory>
		    	 </view>
		    </scroll-view>
		     <!-- 搜索结果 -->
		    <view class="kind_list page_bd_spacing" v-if="showSugResult&&sugList.length&&inputVal">
		         <scroll-view scrollY class="kind_list">
		 			<!-- #ifdef MP -->
		 			<view class="histroy-content" v-for="(item,index) in sugList" :key="index">
		 			    <view @click.stop="selectCityH5(item)" class="kind-list__item-hd" :data-city="item">
		 			        <view class="histroy-item kind-list__item-hd">
		 			           
		 			            <view class="kind-list__item">
		 			                <view class="rtbus-busroute-label flex-row-between">
										<view  class="city-t" v-if="item.type==1"> 城市</view >
										<view  class="station-t" v-if="item.type==2"> 站点</view >
		 			                    <view class="rtbus-busroute-name">
											<texthighlight :text="item.name" :keyword="inputVal"></texthighlight>
										</view>
		 			                </view>
		 			            </view>
		 			        </view>
		 			        <view v-if="index!=0" class="kind-list-seperater-line"></view>
		 			    </view>
		 			</view>
		 			<!-- #endif -->
		 			<!-- #ifdef H5 || APP-PLUS -->
		             <view class="histroy-content" v-for="(item,index) in sugList" :key="index">
		                 <view @click.stop="selectCityH5(item)" class="kind-list__item-hd" :data-city="item">
		                     <view class="histroy-item kind-list__item-hd">
		                         
		                         <view class="kind-list__item">
		                             <view class="rtbus-busroute-label flex-row-between">
		                                 <view class="rtbus-busroute-name">
		                                 	<texthighlight :text="item.name" :keyword="inputVal"></texthighlight>
		                                 </view>
		                             </view>
		                         </view>
		                     </view>
		                     <view v-if="index!=0" class="kind-list-seperater-line"></view>
		                 </view>
		             </view>
		 			<!-- #endif -->
		         </scroll-view>
		     </view>
		 	<view  class="search-empty" v-if="!canNotFindResult"  style="z-index:1000;height: 90vh;padding-bottom: 100px;">
				<emptyPage title="未找到匹配的城市/站点～" :noImage="`${domain}/static/images/noRecord.png`"></emptyPage>
		 	</view>
			
		 </view>
		 
		
	</view>
</template>

<script>
	import {
		startCityList, startCityListSearch 
	} from '@/api/api.js';
	import phoneDirectory from '../components/phone-directory/phone-directory.vue'
	import Cache from '@/utils/cache';
	import { FROM_LOC, TO_LOC} from '@/config/cache.js'
	import emptyPage from '@/components/emptyPage.vue'
	import texthighlight from '@/components/texthighlight/index.vue'
	import { HTTP_REQUEST_URL } from '@/config/app';
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters([ 'viewColor']),
		
		components:{
			phoneDirectory,
			emptyPage,
			texthighlight 
		},
		data() {
			return {
				//示例数据
				domain: HTTP_REQUEST_URL,		
				scrollTop: 0,
				indexList: [],
				list: [],
				source: '',
				inputFocus: false,
				inputVal: "",
				showSugResult: false,
				historyList: [],
				sugList: [],
				canNotFindResult: !0,
				type: 0,
				originId: 0
			}
		},
		onLoad(options) {
			var that = this
			uni.showLoading({
				title:'加载中'
			})
			that.source = options.source
		   startCityList().then(res => {
              that.list = res.data			  
			  // that.indexList = that.list.map(val => {
			  // 	return val.letter;
			  // })		
			  uni.hideLoading()
		    })
			this.historyList = uni.getStorageSync('cxhistoryListLine') ? uni.getStorageSync('cxhistoryListLine') : [];
			console.log("this.historyList",this.historyList)
		},
		methods:{
			sugKeyWord(t) {
			    var e = this;
			    e.inputVal = t.detail.value;
			
				if(t.detail.value!=''){
					startCityListSearch({keywords: t.detail.value.trim()}).then(res => {
					    var re = res, res = re.data;
					    res.length > 0 ? (e.sugList = res, e.canNotFindResult = !0, e.showSugResult = true) : (e.sugList = [], e.canNotFindResult = !1, e.showSugResult = true);
									
					}).catch(err => {
						this.$util.Tips({title: err.message})
					})
				}
			},
			clearInput: function () {
			    var e = this;
			    e.inputFocus = true,
			        e.sugList = [],
			        e.inputVal = ""
			    e.showSugResult = false,
			        e.canNotFindResult = !0;
			},
			
			paramClick(e){
			},
			
			selectCityH5(item){
				console.log("item1",item)
				Cache.set(FROM_LOC,item)
				Cache.clear(TO_LOC);
				
				var historyList = this.historyList;
				if (item.id) {
				    for (var r = 0; r < historyList.length; r++) {
				        historyList[r].id == item.id && historyList.splice(r, 1);
				    }
				    historyList.length >= 10 && historyList.splice(historyList.length - 1, historyList.length);
				    historyList.push(item)
					
				    uni.setStorageSync('cxhistoryListLine', historyList);
				}
				
				// var pages = getCurrentPages();
				// var prevPage = pages[pages.length - 2]; //上一个页面
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				//uni或者vue用$vm
				// prevPage.$vm.selectCityHand = true
				uni.navigateBack({//返回
					delta: 1
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
.page_hd {
		    background: #fff;
	}
	.histroy-list {
	}
	
	.histroy-content {
	    margin: 0 32rpx;
		border-bottom: 1px solid #e5e5e5;
	}
	
	.histroy-content:last-child {
	   border-bottom: none;
	}
	.histroy-item {
	    display: flex;
	}
	
	.histroy-item-icon {
	    width: 40rpx;
	    height: 86rpx;
	    display: flex;
	    justify-content: center;
	    align-content: center;
	    margin-top: 46rpx;
	    margin-right: 24rpx;
	}
	
	.histroy-item-icon image {
	    width: 40rpx;
	    height: 40rpx;
	}
	
	
	.page-content {
	    // position: absolute; 
	    // top: 0;
	    bottom: 0;
	    width: 100vw;
		background: #ffff;
	}
	
	.kind_list {
	    /* position: absolute; */
	    top: 0;
	    bottom: 0;
	    width: 100vw;
	}
	
	.rtbus-search-bar__box {
	    position: relative;
	    padding-left: 32rpx;
	    padding-right: 40px;
	    width: 100%;
	    box-sizing: border-box;
	    z-index: 1;
	}
	.rtbus-icon-clear {
	    padding-left: 40rpx;
	    padding-right: 40rpx;
	    font-size: 0;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex: 0;
	}
	
	.rtbus-icon-clear .icon {
	    height: 40rpx;
	    width: 40rpx;
	}
	
	.rtbus-search-bar__input {
	    position: relative;
	    height: 75rpx;
	    margin-left: 20rpx;
	    color: rgba(128,128,128,1);
	    opacity: 0.6;
	}
	
	.rtbus-searchbar-frame {
	    position: relative;
	    padding-top: 20rpx;
	    padding-left: 28rpx;
	    padding-right: 28rpx;
	    padding-bottom: 20rpx;
	    border-bottom: 1rpx solid #f2f2f2;
	    box-shadow: 0 6px 6px -6px rgba(0,0,0,0.06);
	    display: flex;
	}
	
	.rtbus-searchbar-button {
	    position: relative;
	    width: 100%;
	    height: 92 rpx;
	    line-height: 92 rpx;
	    border-radius: 40rpx;
	    border-color: #f6f6f6;
	    border-width: 0rpx;
	    background: #f6f6f6;
	    z-index: 1;
	    display: flex;
	    justify-content: space-between;
	    padding-left: 32rpx;
		align-items: center;
	}
	
	.rtbus-searchbar-button-title {
	    margin-top: 18rpx;
	    line-height: 56rpx;
	    height: 56rpx;
	    border-right: solid 1rpx rgba(27,45,118,0.12);
	    font-size: 32rpx;
	    color: #333333;
	    display: flex;
	}
	
	.rtbus-searchbar-button-name {
	    max-width: 130rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.rtbus-searchbar-button-arrow {
	    height: 20rpx;
	    width: 20rpx;
	    margin-left: 20rpx;
	    margin-right: 26rpx;
	    margin-top: 18rpx;
	}
	
	.rtbus-search-bar__input {
	    position: relative;
	    height: 92 rpx;
	    font-size: 32 rpx;
	    flex: 1;
	}
	
	.rtbus-searchbar-label {
	    position: relative;
	    z-index: 2;
	    padding-left: 32rpx;
	    text-align: left;
	    color: #888888;
	    line-height: 92rpx;
	    font-size: 32rpx;
	}
	
	.input-placeholder {
	    color: #888888;
	}
	.kind-list__item {
	    flex: 1;
	    background-color: #fff;
	    border-radius: 4rpx;
	    overflow: hidden;
	    display: flex;
	    flex-direction: column;
	    // border-bottom: 1px solid #e5e5e5;
	    padding: 24rpx 0 20rpx 0;
	}
	
	.kind-list__item:first-child {
	    margin-top: 0;
	}
	
	.kind-list__img {
	    width: 60rpx;
	    height: 60rpx;
	}
	
	.kind-list__item-hd {
	    padding: 0;
	    transition: opacity 0.3s;
	}
	
	.kind-list__item-hd_show {
	    opacity: 0.4;
	}
	
	.kind-list__item-bd {
	    height: 1rpx;
	    overflow: hidden;
	    background: #e5e5e5;
	}
	
	.kind-list__item-bd_show {
	    height: auto;
	}
	
	.kind-list-seperater-line {
	    height: 1px;
	    background: white;
	    margin-top: 10rpx;
	    vertical-align: bottom;
	}
	
	.rtbus-busroute-label {
	    position: relative;
	    background: white;
	    font-family: PingFangSC-Medium;
	    line-height: 48rpx;
	    height: 48rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.rtbus-busroute-name {
	    flex: 1;
	    padding-right: 20rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
	.rtbus-busroute-icon {
	    display: inline-block;
	    width: 40rpx;
	    height: 40rpx;
	    margin-top: 4rpx;
	    vertical-align: top;
	}
	
	.rtbus-desc-label {
	    position: relative;
	    background-color: #fff;
	    height: 36rpx;
	    line-height: 36rpx;
	    color: #777777;
	    font-size: 26rpx;
	    max-width: 60vw;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	
	.rtbus-noopen-text {
	    font-family: PingFangSC-Regular;
	    font-size: 13px;
	    color: #777777;
	    letter-spacing: 0;
	    width: 200rpx;
	    flex: 0;
	}
	
	.rtbus-white-space {
	    height: 20rpx;
	    background: #fff;
	    margin-left: 20rpx;
	    margin-right: 20rpx;
	    vertical-align: bottom;
	}
	.city-t {
		background-color: #e8f7ff;
		color: #70bae6;
		padding: 0 4px;
		font-size: 10px;
		margin-right: 8px;
		height: 15px;
		line-height: 15px;
	}
	.station-t {
		background-color: #fff8e8;
		color: #ffb87b;
		padding: 0 4px;
		font-size: 10px;
		margin-right: 8px;
		height: 15px;
		line-height: 15px;
	}
	
</style>